<template>
  <div class="lab-wrapper">
    <aside class="experiment-list-panel">
      <h2>实验列表</h2>
      <ul>
        <li
          v-for="exp in experiments"
          :key="exp.id"
          :class="{ active: exp.id === currentExperimentId }"
          @click="selectExperiment(exp.id)"
        >
          {{ exp.name }}
        </li>
      </ul>
      <div class="lab-instructions">
        <h4>操作说明</h4>
        <p>
          请从列表中选择一个实验。然后，将场景中的实验器材（如金属块）拖拽到烧杯中以开始反应。
        </p>
      </div>
    </aside>

    <main class="experiment-stage">
      <keep-alive>
        <component :is="currentExperimentComponent" />
      </keep-alive>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, defineAsyncComponent } from 'vue';

// 使用 defineAsyncComponent 异步加载实验组件，优化初始加载速度
const experiments = ref([
  {
    id: 'SodiumWater',
    name: '钠与水的反应',
    component: defineAsyncComponent(() => import('./lab/SodiumWaterExperiment.vue'))
  },
  {
    id: 'IronCopperSulfate',
    name: '铁与硫酸铜反应',
    component: defineAsyncComponent(() => import('./lab/IronCopperSulfateExperiment.vue'))
  },
  {
    id: 'FlameTest',
    name: '焰色反应',
    component: defineAsyncComponent(() => import('./lab/FlameTestExperiment.vue'))
  },
  /*
  {
    id: 'IronSteam',
    name: '铁与水蒸气反应',
    component: defineAsyncComponent(() => import('./lab/IronSteamExperiment.vue'))
  }
    */
   {
    id: 'BlackPowder',
    name: '黑火药实验',
    component: defineAsyncComponent(() => import('./lab/BlackPowderExperiment.vue'))
   },
   {
    id:'OhmMeter',
    name:'伏安法测电阻',
    component: defineAsyncComponent(() => import('./lab/OhmMeterExperiment.vue'))
   },
   {
    id:'DoubleSlit',
    name:'双缝干涉实验',
    component: defineAsyncComponent(() => import('./lab/DoubleSlitExperiment.vue'))
   },
  
  // 在这里可以继续添加更多实验...

]);

// 当前选中的实验ID
const currentExperimentId = ref('SodiumWater');

// 计算属性，根据ID返回对应的组件
const currentExperimentComponent = computed(() => {
  const experiment = experiments.value.find(exp => exp.id === currentExperimentId.value);
  return experiment ? experiment.component : null;
});

// 选择实验的函数
function selectExperiment(id) {
  currentExperimentId.value = id;
}
</script>

<style scoped>
.lab-wrapper {
  display: flex;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  width: 100%;
  height: 90vh; /* 占据大部分视口高度 */
  background-color: #e9eef2;
}

.experiment-list-panel {
  flex: 0 0 280px; /* 固定宽度，不伸缩 */
  background-color: #ffffff;
  padding: 20px;
  border-right: 1px solid #d1d9e6;
  box-shadow: 2px 0 10px rgba(0,0,0,0.05);
}

.experiment-list-panel h2 {
  color: #334e68;
  border-bottom: 2px solid #4a90e2;
  padding-bottom: 10px;
  margin-top: 0;
}

.experiment-list-panel ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.experiment-list-panel li {
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  border: 1px solid #d1d9e6;
}

.experiment-list-panel li:hover {
  background-color: #f0f4f8;
}

.experiment-list-panel li.active {
  background-color: #4a90e2;
  color: white;
  font-weight: bold;
  border-color: #4a90e2;
}

.lab-instructions {
  margin-top: 40px;
  padding: 15px;
  background-color: #f0f4f8;
  border-radius: 8px;
  font-size: 14px;
  color: #486581;
}

.lab-instructions h4 {
  margin-top: 0;
}

.experiment-stage {
  flex-grow: 1; /* 占据剩余所有空间 */
  padding: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}
</style>